@import './base.css';

#app {
  width: 100vw;
  height: 100vh;
}

.w100{
  width: 100%;
}
.h100{
  height: 100%;
}

.mL5{
  margin-left: 5px;
}
.mR5{
  margin-right: 5px;
}
.mL10{
  margin-left: 10px;
}
.mR10{
  margin-right: 10px;
}
.mL20{
  margin-left: 20px;
}
.mR20{
  margin-right: 20px;
}
.cursor_pointer{
  cursor: pointer;
}

.f_r{
  display: flex;
  flex-direction: row;
}
.f_c{
  display: flex;
  flex-direction: column;
}
.j_c_s{
  justify-content: start;
}
.j_c_c{
  justify-content: center;
}
.j_c_s_b{
  justify-content: space-between;
}
.j_c_s_a{
  justify-content: space-around;
}
.a_i_c{
  align-items: center;
}
.a_i_f_s{
  align-items: flex-start;
}
.a_i_f_e{
  align-items: flex-end;
}

/* 水平垂直居中 */
.f_r_c_c{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
/* 水平左侧对齐，垂直居中 */
.f_r_s_c{
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
}

/* 水平两边对齐，垂直居中 */
.f_r_s_b{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

/* 水平两边(有间隔)对齐，垂直居中 */
.f_r_s_a{
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}

/* 垂直水平居中 */
.f_c_c_c{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* 垂直两边对齐，水平居中 */
.f_c_s_b{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
/* 垂直两边(有间隔)对齐，水平居中 */
.f_c_s_a{
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}


.page-container{
  width: 100%;
  height: 100%;
}